<style rel="stylesheet/scss" lang="scss" scoped>
	.detail-box {
		padding: 20px;
		border: 1px solid #E5E5E5;
		.detail-box_info {
			width: 100%;
			height: auto;
			>p {
				width: 100%;
				height: 20px;
				line-height: 20px;
				padding-left: 10px;
				border-left: 5px solid #1973bf;
				margin-bottom: 40px;
			}
			>div {
				padding-left: 10px;
				display: flex;
				flex-direction: column;
				>span{
					margin-bottom: 10px;
				}
			}
		}
		.td-pro {
			width: 100%;
			min-height: 60px;
			display: flex;
			align-items: center;
			padding: 10px 5px;
			box-sizing: border-box;
			border-bottom: 1px solid #F0F0F0;
			>img {
				width: 60px;
				height: 60px;
			}
			.det-desc {
				flex: 1;
				display: flex;
				align-items: center;
			}
			.det-price {
				min-width: 100px;
				display: flex;
				height: 100%;
				align-items: center;
				flex-direction: column;
			}
		}
		.td-pro:last-child {
			border-bottom: none;
		}
		.table-box {
			padding: 10px;
			margin-top: 20px;
			overflow: auto;
			height: 600px;
			font-size: 14px;
		}
		.table-b {
			//border: 1px solid #F0F0F0;
			tr{
				border: none;
			}
			td {
				text-align: center;
				color: #666;
				border:none;
				border-color: #f0f0f0;
				border-bottom:1px solid #f0f0f0;
				border-right:1px solid #f0f0f0;
				//border: 1px solid #F0F0F0;
				&:first-child{
					border-left:1px solid #f0f0f0;
				}
			}
			th {
				color: #666;
				height: 40px;
				border:none;
				border-bottom:1px solid #f0f0f0;
				border-right:1px solid #f0f0f0;
				border-top:1px solid #f0f0f0;
				&:first-child{
					border-left:1px solid #f0f0f0;
				}
			}
		}
		.pay-box {
			display: flex;
			flex-direction: column;
			>span {
				margin-bottom: 5px;
			}
		}
		.max-btn-w {
			min-width: 80px;
			margin: 0 auto;
			margin-bottom: 10px;
		}
	}
</style>
<template>
	<div class="detail-box">
		<div class="detail-box_info">
			<p>订单信息</p>
			<div>
				<span>订单号：{{ordeInfo.id}} 
					<el-button 
						type="primary" 
						class="max-btn-w" 
						size="mini"
						:data-clipboard-text="ordeInfo.id">
						复制单号
					</el-button>
				</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_PAY'">订单状态：待支付订单</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_INPAY'">订单状态：正在支付</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_CANCEL_PAY'">订单状态：取消支付订单</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_SENDGOODS'">订单状态：待发货订单</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_RECVGOODS'">订单状态：待收货订单</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_REVIEW'">订单状态：待评论</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_END_GOODS'">订单状态：订单完成</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_ON_ACCOUNT'">挂账下单</span>
				<span v-if="ordeInfo.orderStatus == 'ORDER_ON_ACCOUNT_CANCEL'">订单状态：挂账下单关闭</span>
				<span v-if="ordeInfo.createTime">创建时间：{{ordeInfo.createTime}}</span>
				<span v-if="ordeInfo.payTime">付款时间：{{ordeInfo.payTime}}</span>
				<span v-if="ordeInfo.shipTime">发货时间：{{ordeInfo.shipTime}}</span>
				<span v-if="ordeInfo.finishTime">成交时间：{{ordeInfo.finishTime}}</span>
			</div>
		</div>
		<div class="table-box" v-if="ordeInfo">
			<table cellpadding="0" cellspacing="0" border="1" class="table-b"  style="border:none;width: 100%;">
				<tr>
					<th width="300" class="min-td-width">商品</th>
					<th width="150">单价/数量</th>
					<th width="156">总金额</th>
					<th width="300">买家</th>
					<th width="109">下单时间</th>
					<th width="130">地址</th>
					<th width="80">订单状态</th>
					<th width="130">操作</th>
				</tr>
				<template >
					<!-- <tr>
						<td colspan="8">
							<div style="height: 35px;line-height: 35px;">
								订单号: {{ordeInfo.id}}
							</div>
						</td>
					</tr> -->
					<tr>
						<td colspan="2">
							<div class="td-pro" v-for="(element, childIndex) in ordeInfo.detailList">
								<img  v-lazy="element.goodsIcon"/>
								<div class="det-desc">{{element.goodsName}}</div>
								<div class="det-price">
									<span>{{element.price}}元</span>
									<span>{{element.num}}件</span>
								</div>
							</div>

						</td>
						<td>
							<div class="pay-box">
								<span>实际支付: {{ordeInfo.payTotal}}</span>
								<span>原价: {{ordeInfo.oriPrice}}</span>
								<span v-if="(ordeInfo.oriPrice - ordeInfo.payTotal) > 0">优惠: {{ordeInfo.oriPrice - ordeInfo.payTotal}}</span>
							</div>
						</td>
						<td>
							<div class="pay-box">
								<span>{{ordeInfo.contactName}}</span>
								<span>{{ordeInfo.contactPhone}}</span>
							</div>
						</td>
						<td>
							<span>{{ordeInfo.createTime}}</span>
						</td>
						<td>
							<span>{{ordeInfo.address}}</span>
						</td>
						<td>
							<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_PAY'">待支付订单</span>
							<span v-if="ordeInfo.orderStatus == 'ORDER_INPAY'">正在支付</span>
							<span v-if="ordeInfo.orderStatus == 'ORDER_CANCEL_PAY'">取消支付订单</span>
							<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_SENDGOODS'">待发货订单</span>
							<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_RECVGOODS'">待收货订单</span>
							<span v-if="ordeInfo.orderStatus == 'ORDER_WAIT_REVIEW'">待评论</span>
							<span v-if="ordeInfo.orderStatus == 'ORDER_END_GOODS'">订单完成</span>
							<!--<span v-if="item.orderStatus == 'ORDER_ON_ACCOUNT'">挂账下单</span>-->
							<span v-if="ordeInfo.orderStatus == 'ORDER_ON_ACCOUNT_CANCEL'">挂账下单关闭</span>
						</td>
						<td>
							<div class="pay-box">
								<span v-if="ordeInfo.transportName">快递公司：{{ordeInfo.transportName}}</span>
								<span v-if="ordeInfo.transportNo">快递单号：{{ordeInfo.transportNo}}</span>
								<el-button 
									type="primary" 
									class="max-btn-w" 
									v-if="ordeInfo.transportNo"
									size="mini"
									:data-clipboard-text="ordeInfo.transportNo">
									复制物流单号
								</el-button>
							</div>
						</td>
					</tr>
				</template>
			</table>
		</div>
	</div>
</template>
<script>
	import Clipboard from 'clipboard'
	export default {
		props: {
			ordeInfo: {
				type: Object,
				default: {}
			}
		},
		created() {
			this.initClip()
		},
		methods: {
			// 初始化Clipboard
			initClip() {
				let _this = this
				var clipboard = new Clipboard('.max-btn-w');
			    clipboard.on('success', function(e) {
					_this.$message({
						message: '复制成功',
						type:'success'
					})
			    })
			},
		}
	}
</script>
